import { css } from '@emotion/css';

import { GrafanaTheme2 } from '@grafana/data';
// import { selectors } from '@grafana/e2e-selectors';
// import { Trans } from '@grafana/i18n';
import { useStyles2 } from '@grafana/ui';

export interface Props {
  /**
   * Defaults to Page
   */
  entity?: string;
}

export function EntityNotFound({ entity = 'Page' }: Props) {
  const styles = useStyles2(getStyles);
  // const lowerCaseEntity = entity.toLowerCase();

  return (
    // <div className={styles.container} data-testid={selectors.components.EntityNotFound.container}>
    //   <EmptyState message={`${entity} not found`} variant="not-found">
    //     <Trans i18nKey="entity-not-found.description">
    //       We&apos;re looking but can&apos;t seem to find this {{ lowerCaseEntity }}. Try returning{' '}
    //       <TextLink href="/">home</TextLink> or seeking help on the{' '}
    //       <TextLink href="https://community.grafana.com" external>
    //         community site.
    //       </TextLink>
    //     </Trans>
    //   </EmptyState>
    // </div>
    <div className={styles.container}>
      <h1>Forbidden</h1>
      <div className={styles.subtitle}>
        请尝试
        <a href="https://work.xxxxx.com/new-work/static/main/process-start/6696" target='_blank'  rel="noreferrer" className="external-link">&nbsp;申请权限&nbsp;</a>  
        或
        <a href="/" className="external-link">&nbsp;返回主页</a> 谢谢！
      </div>
      
      <div className={styles.grot}>
        <img className={styles.img} src="/public/img/sec-logo.webp" width="150px" alt="grot" />
      </div>
      

    </div>
  );
}

export function getStyles(theme: GrafanaTheme2) {
  return {
    img: css({
      filter: 'grayscale(100%)',
    }),
    container: css({
      display: 'flex',
      flexDirection: 'column',
      padding: theme.spacing(8, 2, 2, 2),
      h1: {
        textAlign: 'center',
      },
    }),
    subtitle: css({
      color: theme.colors.text.secondary,
      fontSize: theme.typography.h5.fontSize,
      padding: theme.spacing(2, 0),
      textAlign: 'center',
    }),
    grot: css({
      maxWidth: '450px',
      paddingTop: theme.spacing(8),
      margin: '0 auto',
    }),
  };
}
